<template>
  <div>
    <el-container>
      <el-container>
        <el-main class="el-mainBox">
          <div class="rightLayout">
            <el-header >
              <div class="report_header" ref="headerHeight">
                <div class="report_header_left"></div>
                <!-- <div style="width: 100px;display: flex;align-items: center;margin-left: 10px;">
                  <svg-icon class="primary" :icon-class="$route.meta.icon" />
                  <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
                </div> -->
                <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
                  <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">

                    <div class="report_header_query">
                      <search-options ref="memberRef" :request="'member'" :tips-text="'发卡人'" @getValue="queryMemberId" />
                    </div>
                    <div class="report_header_query">
                      <search-options ref="receiverRef" :request="'member'" :tips-text="'使用人'" @getValue="queryReceiverId" />
                    </div>
                    <div class="report_header_query">
                      <search-options ref="productRef" :request="'product'"  :tips-text="'请选择商品'" @getValue="queryProductId" />
                    </div>
                    <div class="report_header_query">
                      <el-select v-model="query.status" placeholder="请选择状态" clearable>
                        <el-option
                          v-for="item in [{label: '待领取', value: 0},{label: '待使用', value: 1},{label: '已使用', value: 2}]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                  </div>
                  <div>
                  <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
                  </div>
                </div>
              </div>
<!--              <div>-->
<!--                <svg-icon class="primary" :icon-class="$route.meta.icon" />-->
<!--                <span class="primary">{{ $route.meta.title }}</span>-->
<!--                <el-select v-model="query.sysMchId" clearable placeholder="请选择商户" style="margin-left:20px" v-if="mchType==0||mchType==3"-->
<!--                           filterable  value-key="id" :filter-method="querySysmch" @change="changeSysMch" >-->
<!--                  <el-option v-for="item in mchIdOptions" :key="item.id"   :label="item.name" :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </div>-->
<!--              <div class="header-button-container">-->
<!--                <el-button :icon="queryType? 'el-icon-close':'el-icon-search'" type="primary" @click="chooseClick">{{ queryType == false?'查询':'隐藏' }}</el-button>-->
<!--              </div>-->
            </el-header>
            <div class="pd10">
<!--              <div v-show="queryType == true" style="margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between;">-->
<!--                <div>-->
<!--                  <el-row :gutter="10">-->
<!--                    <el-col :span="6">-->
<!--                      <search-options ref="memberRef" :request="'member'" :tips-text="'请选择用户名'" @getValue="queryMemberId" />-->
<!--                    </el-col>-->
<!--                    <el-col :span="6">-->
<!--                      <search-options ref="receiverRef" :request="'receiver'" :request-key-value="{label: 'consignee', value: 'id'}" :tips-text="'请选择收货人'" @getValue="queryReceiverId" />-->
<!--                    </el-col>-->
<!--                    <el-col :span="6">-->
<!--                      <search-options ref="productRef" :request="'product'" :fixedParams="{ subType: 1 }" :tips-text="'请选择商品'" @getValue="queryProductId" />-->
<!--                    </el-col>-->
<!--                    <el-col :span="6">-->
<!--                      <el-select v-model="query.status" placeholder="请选择状态" clearable>-->
<!--                        <el-option-->
<!--                          v-for="item in [{label: '待领取', value: 0},{label: '待使用', value: 1},{label: '已使用', value: 2}]"-->
<!--                          :key="item.value"-->
<!--                          :label="item.label"-->
<!--                          :value="item.value"-->
<!--                        />-->
<!--                      </el-select>-->
<!--                    </el-col>-->
<!--                  </el-row>-->
<!--                </div>-->
<!--                <div>-->
<!--                  <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" :loading="queryClicked" @click="queryClick">查询</el-button>-->
<!--                  <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" :loading="resetClicked" @click="resetClick">重置</el-button>-->
<!--                </div>-->
<!--              </div>-->
              <div>
                <el-table v-loadMore="[payLoads,'giftCard-list']" :data="giftCardList" stripe border :height="curHeight" style="width: 100%">
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="日期" width="110" align="center">
                    <template slot-scope="scope">
                      <span>{{scope.row.createDate | dateFormatter}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="类型" width="80" align="center">
                    <template slot-scope="scope">
                      <el-tag :type="scope.row.type == 0 ?'':'success'">
                        <span>{{ scope.row.type | watchType }}</span>
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="缩略图" width="80" align="center">
                    <template slot-scope="scope">
                      <img :src="scope.row.thumbnail" style="width: 50px; vertical-align:middle; overflow: hidden;">
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="礼卡名称" />
                  <el-table-column label="状态" width="80" align="center">
                    <template slot-scope="scope">
                      <el-tag :type="scope.row.status == 0 ?'':scope.row.status == 1 ? 'success':scope.row.status == 2 ?'warning':''">
                        <span>{{ scope.row.status | watchStatus }}</span>
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额" width="80" align="right">
                    <template slot-scope="scope">
                      <span>{{ scope.row.price | watchPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="memberName" label="发卡人" width="150" />
                  <el-table-column prop="receiverName" label="使用人" width="150" />
                  <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                       <span style="color: #409EFF" @click="detailsClick(scope.row.orderId)">详情</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="height: 50px;padding-left: 10px;border-top: 1px solid #eeeeee">
              <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadGiftCard" />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import loadMore from '@/utils/loadMore.js'
import permission from '@/directive/permission/index.js' // 权限判断指令
import Pagination from '@/components/Pagination'
import searchOptions from '@/components/searchOptions'
import { list } from '@/api/giftCard'
import { getInfo, list as sysMchList } from '@/api/sysMch'
export default {
  name: 'giftCard-list',
  directives: { permission, loadMore },
  components: { Pagination, searchOptions },
  filters: {
    watchPrice(val) {
      return val.toFixed(2)
    },
    watchType(val) {
      if (val === 0) {
        return '套餐'
      } else if (val === 1) {
        return '礼单'
      }
    },
    watchStatus(val) {
      if (val === 0) {
        return '待领取'
      } else if (val === 1) {
        return '待使用'
      } else if (val === 2) {
        return '已使用'
      }
    }
  },
  data() {
    return {
      giftCardList: [],
      mchIdOptions:[],
      mchType:'',
      queryType: false,
      queryClicked: false,
      resetClicked: false,
      curHeight: null,
      payLoads: '',
      query: {
        memberId: '',
        sysMchId:'',
        receiverId: '',
        productId: '',
        status: ''
      },
      pageNum: 1,
      pageSize: 20,
      total: 0
    }
  },
  activated() {
    this.payLoads = new Date().getTime()
  },
  created() {
    this.loadSysmch('')
    this.loadMch()
    this.loadGiftCard()
  },
  mounted() {
    this.beforeMount()
    this.comeIn()
  },
  methods: {
    loadSysmch(query){
      sysMchList({ name: query }).then(res => {
        this.mchIdOptions = res.data.data.filter(val => { return val.mchType === 3||val.mchType === 1 })
      }).catch(err => { console.log(err) })
    },
    changeSysMch(){
      this.loadGiftCard()
    },
    querySysmch(query){
      this.loadSysmch(query)
    },
    loadMch(){
      getInfo().then(res=>{
        this.mchType=res.data.mchType
      })
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224// 减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 270// 减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224// 减去页面上固定高度height
    },
    chooseClick() {
      this.queryType = !this.queryType
      if (this.queryType == false) {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224// 减去页面上固定高度height
      } else {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 270// 减去页面上固定高度height
      }
    },
    queryMemberId(value) {
      this.query.memberId = value
    },
    queryReceiverId(value) {
      this.query.receiverId = value
    },
    queryProductId(value) {
      this.query.productId = value
    },
    queryClick() {
      this.queryClicked = true
      this.loadGiftCard()
    },
    resetClick() {
      this.resetClicked = true
      this.$refs.memberRef.resetValue()
      this.$refs.receiverRef.resetValue()
      this.$refs.productRef.resetValue()
      this.query.status = ''
      this.loadGiftCard()
    },
    loadGiftCard() {
      const params = new URLSearchParams()
      params.append('memberId', this.query.memberId)
      params.append('receiverId', this.query.receiverId)
      params.append('mchId',this.query.sysMchId)
      params.append('productId', this.query.productId)
      params.append('status', this.query.status)
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      list(params).then(res => {
        console.log(res)
        this.giftCardList = res.data.data
        this.total = res.data.total
        this.queryClicked = false
        this.resetClicked = false
      }).catch(() => {
        this.queryClicked = false
        this.resetClicked = false
      })
    },
    detailsClick(id){
      this.$router.push({
        path: '/order/view', query: { id: id }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .table-container {
    padding: 10px;
    box-sizing: border-box;
  }
  .el-mainBox{
    padding: 0 !important;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }

  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
</style>
